<template>
  <div class="right-out">
    <ul class="nav">
      <li
        class="nav-item"
        v-for="(item, index) in navList"
        :key="index"
        @click="changeIsActive(index)"
      >
        {{ item }}
        <span class="nav-bot" v-show="isActive === index"></span>
      </li>
    </ul>
    <div class="content">
      <el-form>
        <el-form-item>
          <el-input
            class="serch-inp"
            :prefix-icon="Search"
            size="large"
          ></el-input>
          <el-button type="info" plain size="large">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table
        height="250"
        class="table"
        style="width: 100%"
        :header-cell-style="{
          background: '#f5f7f9',
          color: '#393939',
          fontWeight: '400',
        }"
      >
        <el-table-column
          prop="date"
          label="订单信息"
          width="400px"
          align="center"
        />
        <el-table-column
          prop="name"
          label="购买数量"
          width="150px"
          align="center"
        />
        <el-table-column
          prop="address"
          label="单价"
          width="100px"
          align="center"
        />
        <el-table-column
          prop="address"
          label="实付"
          width="100px"
          align="center"
        />
        <el-table-column
          prop="address"
          label="状态"
          width="100px"
          align="center"
        />
        <el-table-column
          prop="address"
          label="操作"
          width="100px"
          align="center"
        />
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "order",
});
</script>

<script setup lang="ts">
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
const navList = ref([
  "全部订单",
  "待付款",
  "待评价",
  "待服务/发货",
  "待确认",
  "退款/售后",
]);

const isActive = ref(0);
const changeIsActive = (index: number) => {
  isActive.value = index;
};
</script>
<style scoped lang="scss">
.right-out {
  .nav {
    width: 1020px;
    background-color: white;
    border-radius: 3px;
    font-size: 14px;
    box-sizing: border-box;
    margin-bottom: 10px;
    display: flex;
    .nav-item {
      padding: 28px 30px;
      position: relative;
      cursor: pointer;
      .nav-bot {
        width: 37px;
        height: 4px;
        background-color: #ff36b7;
        display: inline-block;
        position: absolute;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
      }
    }
  }
  .content {
    width: 1020px;
    min-height: 700px;
    background-color: white;
    border-radius: 3px;
    padding: 30px;
    box-sizing: border-box;
    .el-form {
      .serch-inp {
        width: 300px;
        margin: 0 20px 0 300px;
      }
      .el-button {
        border: none;
      }
    }
  }
}
</style>
